<template>
  <div id="app">
    <div class="animate"  :class="geteffect">
      <router-view></router-view>
    </div>
 
    <div class="foot">
        <li> <router-link to="/fenlei">分类</router-link></li>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import siderRight from './components/siderRight'
export default {
  name: 'app',
  data(){
    return {
      effect: 'effect'
    }
  },
  computed: {
      ...mapGetters([
         'getsildert','geteffect'
      ])
    },
  components: {
      siderRight
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';


.animate{
  width: 100%;
  transition: all .5s ease;
  background-color: #eee;
  margin-left: 0;
}
.effect {
    margin-left: 0;
}
 
.silder-right {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 1111;
}
.foot {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    background-color: #000;

    a {
        color:#fff;
    }
}

body {
  background-color: #fbf9fe;

}

.mytran-transition { 
  transition: all 0.5s ease; 
  background-color: greenyellow;
  left: -100%; 
}
.mytran-enter { 
  height: 0; 
  width: 0;
  left: 0; 
}  
</style>
